<template>
  <div class="city-select">
    <select v-model="selectedProvince" name="province" class="select">
      <option disabled value="">请选择省</option>
      <option v-for="(item, index) in provinces"
              v-if="item.level === 1"
              :value="item">
        {{ item.name }}
      </option>
    </select>

    <select v-model="selectedCity" name="city" class="select">
      <option disabled value="">请选择市</option>
      <option
        v-for="(item, index) in cities"
        :value="item">
        {{ item.name }}
      </option>
    </select>
    <select v-model="selectedBlock" name="block" class="select">
      <option disabled value="">请选择区</option>
      <option
        v-for="(item, index) in blocks"
        :value="item">
        {{ item.name }}
      </option>
    </select>
  </div>
</template>

<script>
  import provinces from '../../js/provinces'
  export default {
    name: "Zicity2",
    watch: {
      selectedProvince (newVal, oldVal) {
        // 港澳台数据只有一级,特殊处理
        if (newVal.sheng === '71' || newVal.sheng === '81' || newVal.sheng === '82') {
          this.cities = [newVal]
          this.blocks = [newVal]
        } else {
          this.cities = this.provinces.filter(item => {
            if (item.level === 2 && item.sheng && newVal.sheng === item.sheng) {
              return true
            }
          })
        }
        var _this = this
        // 此时在渲染DOM,渲染结束之后再选中第一个
        this.$nextTick(() => {
          _this.selectedCity = _this.cities[0]
          _this.$emit('input', _this.info)
        })
      },
      selectedBlock () {
        var _this = this
        this.$nextTick(() => {
          _this.$emit('input', _this.info)
        })
      },
      selectedCity (newVal) {
        // 选择了一个市,要选择区了 di是城市的代表,sheng
        if (newVal.sheng === '71' || newVal.sheng === '81' || newVal.sheng === '82') {
          this.blocks = [newVal]
          this.cities = [newVal]
        } else {
          this.blocks = this.provinces.filter(item => {
            if (item.level === 3 && item.sheng && item.sheng === newVal.sheng && item.di === newVal.di && item.name !== '市辖区') {
              return true
            }
          })
        }
        var _this = this
        this.$nextTick(() => {
          _this.selectedBlock = _this.blocks[0]
          // 触发与 v-model相关的 input事件
          _this.$emit('input', _this.info)
        })
      }
    },
    computed: {
      info () {
        return {
          province: this.selectedProvince,
          city: this.selectedCity,
          block: this.selectedBlock
        }
      }
    },
    data () {
      return {
        selectedProvince: '',
        selectedCity: '',
        selectedBlock: '',
        cities: 0,
        provinces,
        blocks: 0
      }
    }
  }
</script>

<style scoped>
  .select{
    width: 140px;
    height: 35px;
    border: 1px solid #999;
    margin-left: 22px;
    font-size: 16px;
    padding-left: 10px;
  }
</style>
